<template>
  <ContentWrap class="h-[55%]">
    <el-form :model="queryParams" ref="queryFormRef" label-width="auto" :inline="true">
      <el-form-item label="业务模块" prop="businessModule">
        <el-select
          v-model="queryParams.businessModule"
          placeholder="请输入业务模块"
          :clearable="true"
        >
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.SETTING_BUSINESS_MODULE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="显示字段名称" prop="showName">
        <el-input
          v-model="queryParams.showName"
          placeholder="请输入显示字段名称"
          :clearable="true"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleClickSearch">
          <Icon icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="handleClickReset">
          <Icon icon="ep:refresh" />
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <Table
      :columns="columns"
      adaptive
      :data="fieldData"
      save-key="BusinessField"
      @row-click="handleFieldClick"
      @row-dblclick="handleFieldUpdate"
    >
      <template #menu="{ row }">
        <context-menu-item
          label="修改"
          v-hasPermi="['infra:data:dict:update']"
          @click="handleFieldUpdate(row)"
        />
      </template>
    </Table>
  </ContentWrap>
  <ContentWrap class="h-[35%]">
    <el-tabs v-model="tabActiveName" type="card">
      <el-tab-pane label="字段选项" name="options">
        <Table :columns="dataColumns" :data="optionsData" adaptive />
      </el-tab-pane>
    </el-tabs>
  </ContentWrap>
  <BusinessFieldEdit ref="editRef" @success="handleFieldEditSuccess" />
</template>
<script setup name="BusinessField" lang="ts">
import { DICT_TYPE, getIntDictOptions, getDictObj } from '@/utils/dict'
import * as BusinessFieldApi from '@/api/setting/businessField'
import { formatDate } from '@/utils/formatTime'
import BusinessFieldEdit from '@/views/setting/businessField/BusinessFieldEdit.vue'
const editRef = ref()
const fieldData = ref()
const optionsData = ref()
const queryFormRef = ref()
const queryParams = ref({
  businessModule: undefined,
  showName: undefined
})
const tabActiveName = ref('options')
const columns = [
  {
    label: '业务模块',
    prop: 'businessModule',
    formatter: ({ businessModule }) =>
      getDictObj(DICT_TYPE.SETTING_BUSINESS_MODULE, businessModule).label
  },
  {
    label: '字段名称',
    prop: 'showName'
  },
  {
    label: '是否显示',
    prop: 'isShow',
    formatter: ({ isShow }) => (isShow ? '是' : '否')
  },
  {
    label: '是否必填',
    prop: 'isMustFill',
    formatter: ({ isMustFill }) => (isMustFill ? '是' : '否')
  },
  {
    label: '是否可编辑',
    prop: 'isEditName',
    formatter: ({ isEditName }) => (isEditName ? '是' : '否')
  },

  {
    label: '创建时间',
    prop: 'createTime'
  },
  {
    label: '更新时间',
    prop: 'updateTime'
  }
]

const dataColumns: TableColumnList = [
  {
    label: '选项名称',
    prop: 'name'
  },
  {
    label: '是否停用',
    prop: 'isDisabled',
    formatter: ({ isDisabled }) => (isDisabled ? '是' : '否')
  },

  {
    label: '创建时间',
    prop: 'createTime',
    formatter: ({ createTime }) => formatDate(createTime)
  }
]
/** 初始化 */
onMounted(() => {
  handleClickSearch()
})

/** 搜索按钮操作 */
const handleClickSearch = async () => {
  fieldData.value = await BusinessFieldApi.listQuery(queryParams.value)
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

const handleFieldUpdate = (row) => {
  editRef.value.open(row.id)
}

const handleFieldClick = async (row) => {
  optionsData.value = await BusinessFieldApi.getOptionByFieldId(row.id)
}

const handleFieldEditSuccess = () => {
  handleClickSearch()
  optionsData.value = []
}
</script>
